<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link th:href="@{/static/css/layui/layui.css}" rel="stylesheet">
        <link th:href="@{/static/css/style.css}" rel="stylesheet">
        <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/static/css/layer/layer.css}" rel="stylesheet">
        <link th:href="@{/static/css/layui/admin.css}" rel="stylesheet">
        <link th:href="@{/static/css/element-ui.2.13.0.css}" rel="stylesheet">
        <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet">
    </head>
    <body>
        <div class="layui-fluid" id="app">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div class="layui-card">
                        <span style="margin-left: 92%" @click="addMenu()" class="btn btn-primary">新增</span>
                        <div class="layui-card-body">
                            <el-table
                                    :data="tableData"
                                    style="width: 100%;margin-bottom: 20px;"
                                    row-key="id"
                                    border
                                    default-expand-all
                                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                                <el-table-column
                                        prop="menuName"
                                        label="菜单名称"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="menuCode"
                                        label="菜单别名"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="menuHref"
                                        label="菜单链接"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="menuWeight"
                                        label="排序"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="menuLevel"
                                        label="菜单层级"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="isShow"
                                        :formatter="formatShow"
                                        label="状态"
                                        align="center">
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                @click="handleEdit(scope.row)">编辑
                                        </el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.row)">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    layout="prev,pager,next,sizes"
                                    :page-sizes="[5, 10, 15, 20]"
                                    :page-size="page_size"
                                    :current-page="current_page"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script th:inline="javascript">
            var context = [[@{
                /}]];
        </script>
        <script th:src="@{/static/js/jquery.1.12.4.min.js}"></script>
        <script th:src="@{/static/js/layui/layui.js}"></script>
        <script th:src="@{/static/js/jquery.validate.min.js}"></script>
        <script th:src="@{/static/js/layui/lay/modules/layer.js}"></script>
        <script th:src="@{/static/js/vue.2.6.11.js}"></script>
        <script th:src="@{/static/js/element-ui.2.13.0.js}"></script>
        <script th:src="@{/static/js/modules/menu/menu.js}"></script>
    </body>
</html>